<template>
  <div class="content">
    <mid-dialog title="编辑" @close="closeEdit">
      <div class="addapp">
        <table>
          <tr>
            <td>姓名</td>
            <td>{{adminName}}</td>
          </tr>
          <tr>
            <td>邮箱号码</td>
            <td>{{adminEmail}}</td>
          </tr>
          <tr>
            <td>职位设置</td>
            <td>
              <div class="type">
                <input
                  @focus="imgflag = false"
                  @blur="blur"
                  class="searchInput select"
                  type="text"
                  placeholder="请输入服务器类型"
                  v-model="roleName"
                />
                <div @click="imgflag = !imgflag" class="pic">
                  <img :src="imgurl" alt="" />
                </div>
                <ul v-show="imgflag === false" class="options">
                  <li
                    v-for="(item,index) in options"
                    :key="index"
                    @click="setting(item.roleName)"
                  >
                    {{ item.roleName }}
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </table>

        <div class="btns flex-start">
          <div class="btn-white2" @click="closeEdit">取消</div>
          <div class="btn-blue2" @click="save">保存</div>
        </div>
      </div>
    </mid-dialog>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'
export default {
  props: {
    state: {
      default: 0
    }
  },
  data () {
    return {
      position: '',
      imgflag: true,
      options: ['管理员', 'xxx', 'yyy'],
      adminName: sessionStorage.getItem('adminName'),
      adminEmail: sessionStorage.getItem('adminEmail'),
      roleName: sessionStorage.getItem('roleName')

    }
  },
  computed: {
    imgurl () {
      if (this.imgflag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }

  },
  created () {
    this.$store.dispatch('systemManage/getRolelistData').then(res => {
      this.options = res.data
    }).catch(res => {
      this.$message({
        type: 'error',
        message: res,
        duration: 1000
      })
    })
  },
  methods: {
    setting (val) {
      this.roleName = val
      this.imgflag = true
    },
    closeEdit () {
      this.$emit('close')
    },
    blur () {
      setTimeout(() => {
        this.imgflag = true
      }, 200)
    },
    save () {
      if (this.state === 1) { // 已注册表的编辑
        // console.log(this.adminEmail, this.roleName)
        this.$store.dispatch('systemManage/updateData', { adminEmail: this.adminEmail, roleName: this.roleName }).then(res => {
          // console.log(res)
          this.$message({
            type: 'success',
            message: res.message,
            duration: 1000
          })
          this.$store.dispatch('systemManage/getRegisteredData')
        }).catch(res => {
          this.$message({
            type: 'error',
            message: res.message,
            duration: 1000
          })
        })
      } else { // 未注册表的编辑
        this.$store.dispatch('systemManage/noupdateData', { adminEmail: this.adminEmail, roleName: this.roleName }).then(res => {
          // console.log(res)
          this.$message({
            type: 'success',
            message: res.message,
            duration: 1000
          })
          this.$store.dispatch('systemManage/getUnRegisterData')
        }).catch(res => {
          this.$message({
            type: 'error',
            message: res.message,
            duration: 1000
          })
        })
      }
      this.closeEdit()
    }

  }
}
</script>

<style lang="scss" scoped>
.addapp {
  text-align: center;
  table {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    td {
      &:nth-child(1) {
        height: 60px;
        white-space: nowrap;
        text-align: right;

      }
      &:nth-child(2) {
        width: 300px;
        height: 60px;

        padding-left: 20px;
        text-align: left;
      }
    }
  }
  .msg {
    margin: 8px 0;
  }
  .btns {
    position: absolute;
    bottom: 20px;

    .btn-white2 {
      width: 100px;
      margin-left: 156px;
      margin-right: 20px;
    }
    .btn-blue2 {
      width: 100px;
    }
  }
  .options{
    height: 270px;
    overflow-y: scroll;
  }
}
</style>
